<template>
  <div class="loginCont" @keydown="enterFn($event)" :style="'background-image: url(static/img/login_bg.png);height:'+docheight+'px'">
    <!-- <video muted autoplay loop src="static/video/logoVideo.mp4"></video> -->
    <div class="formMask">
      <div class="maskTop">
        <h1>新加坡研学夏令营报名-后台系统</h1>
        <h3>Singapore graduate summer camp registration backstage system</h3>
      </div>
      <div class="formCont">
        <div class="formLogo">
          <img src="static/img/logo.png">
        </div>
        <div class="formEnter">
          <div class="inputCont">
            <div class="inputName">Phone(手机号)</div>
            <div class="inputVal">
              <el-input v-model="account" type="text" placeholder="Enter your Phone"></el-input>
            </div>
          </div>
          <div class="inputCont">
            <div class="inputName">Password(密码)</div>
            <div class="inputVal">
              <el-input v-model="password" type="password" placeholder="Enter your password"></el-input>
            </div>
          </div>
          <btn style="width:100%;font-size:16px;" value="登录" @click="loginFn"></btn>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import btn from '@/components/public/btn.vue'
import {login} from "@/http/api";

export default {
      components: {btn},
      data() {
          return {
            account:'',
            password:'',
          }
      },
      props: {},
      methods: {
        enterFn(e){
          if(e.keyCode==13){
            this.loginFn()
          }
        },
        loginFn(){
          if(this.account==''){
            this.$message('请输入手机号');
            return false
          }else if(this.password==''){
            this.$message('请输入密码');
            return false
          }
          var data = {
            admin_username:this.account,
            admin_password:this.password,
          }
          login(data).then((res)=>{
            if(res.data.code==1){
              localStorage.setItem('token',res.data.data)
              localStorage.setItem('real_name',this.account)
              this.$message({
                message: '登陆成功',
                type: 'success'
              });
              setTimeout(()=>{
                this.$router.push({path:'/userCenterOrder'})
              },1500)
            }else{
              this.$message(res.data.msg);
            }
          }).catch((err)=>{
            this.$message('服务器请求超时');
          })
        }
      },
      mounted() {
      },
      created() {
        if(localStorage.getItem('real_name')){
          // this.account = localStorage.getItem('real_name')
        }
      },
  }
</script>

<style scoped lang="less">
.loginCont{
  width: 100%;
  overflow: hidden;
  background-size: cover;
  position: relative;
  video{
    width: 100%;
  }
  .formMask{
    width: 100%;
    position: absolute;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    left: 0;
    top: 0;
    .maskTop{
      text-align: center;
      margin-top: 70px;
      color: white;
      margin-bottom: 100px;
    }
    .formCont{
      background-color: #fff;
      width:550px;
      margin: 0 auto;
      padding: 0 50px 30px;
      box-sizing: border-box;
      border-radius: 10px;
      .formLogo{
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background-color: #fff;
        padding: 10px;
        box-sizing: border-box;
        position: relative;
        top: -60px;
        margin: 0 auto;
        overflow: hidden;
        img{
          width: 100%;
          border-radius: 50%;
        }
      }
      .formEnter{
        margin-top: -60px;
        .inputCont{
          width: 100%;
          margin-bottom: 25px;
          .inputName{
            margin-bottom: 10px;
          }
          .inputVal{
            display: flex;
            .phoneInput{
              width: 50px;
              flex: 1;
            }
          }
        }
      }
    }
  }
}
</style>
